<template>
  <div class="RunAttendance-wrap">
    <common-title-bar :mode="'white'" :isShowMoreOption="true" :always="isAlways"></common-title-bar>
    <div class="RunAttendance-number">
      <div class="numbers-row">
        <div v-for="(n, i) in scrollNumberArr" :key="i">
          <div class="numbers-column" :style="{transform: `translateY(-${n * 10}%)`}">
            <div v-for="j in 10" :key="j">{{j - 1}}</div>
          </div>
        </div>
      </div>
      <p class="people">已有{{user_num}}人打卡报名，预计瓜分{{pageData.jackpot_step}}步</p>
    </div>
    <div class="RunAttendance-play">
      <h2>活动玩法</h2>
      <div class="RunAttendance-play-steps">
        <div>
          <div class="step-wrap">
            <div class="step_1" :class="{'yes': pageData.status >= 1}"></div>
          </div>
          <h3>打卡成功</h3>
          <p>第一天</p>
        </div>
        <div>
          <div class="step-wrap">
            <div class="step_2" :class="{'yes': pageData.status >= 3}"></div>
          </div>
          <h3>步数兑换颜值</h3>
          <p>第二天</p>
        </div>
        <div>
          <div class="step-wrap">
            <div class="step_3" :class="{'yes': pageData.status >= 5}"></div>
          </div>
          <h3>瓜分步数</h3>
          <p>第三天</p>
        </div>
      </div>
      <div class="runBtn" v-if="pageData.status == 0" @click="rankJackpot">支付10步，立即报名</div>
      <div class="runBtn" style="filter: grayscale(1); color: #fff" v-else-if="pageData.status == 1">报名成功，记得明天去兑换哦</div>
      <div class="runBtn" v-else-if="pageData.status == 2" @click="goBack">立即去兑换颜值</div>
      <div class="runBtn" style="filter: grayscale(1); color: #fff" v-else-if="pageData.status == 3">兑换成功，记得明天来瓜分</div>
      <div class="runBtn" v-else-if="pageData.status == 4" @click="divideJackpot">立即瓜分</div>
      <div class="runBtn" v-else-if="pageData.status == 5" @click="rankJackpot">支付10步，报名下一期</div>
      <div class="tips">注：报名成功后支付的步数概不退还哦~</div>
    </div>
    <div class="RunAttendance-rule">
      <h2>瓜分步数规则</h2>
      <p v-html="pageData.rule"></p>
    </div>
  </div>
</template>
<script>
import {jackpotIndex, rankJackpot, divideJackpot} from '@/api/request'
import CommonTitleBar from '@/components/CommonTitleBar'
import { Toast } from 'vant'
import { mapState } from "vuex";
export default {
  name: 'RunFortuneBags',
  data () {
    return {
      scrollNumberArr: [],
      number: '',
      pageData: {},
      interval: null,
      user_num: 0
    }
  },
  components: {
    CommonTitleBar
  },
  computed: mapState({
    isAlways: state => {
      return state.isAlways
    }
  }),
  watch: {
    number (val) {
      this.scrollNumberArr = this.formateScrollNumber(val)
    }
  },
  created () {
    this.number = 0
  },
  mounted () {
    this.jackpotIndex({}, (num) => {
      this.user_num = num
    })
    clearInterval(this.interval)
    this.interval = setInterval(() => {
      this.jackpotIndex({
        noLoading: true
      })
    }, 6000);
    this.webViewFunc('enter', (data) => { // 监听客户端事件
      // Toast('进来了')
    })
    this.webViewFunc('exit', (data) => { // 监听客户端事件
      // Toast('要离开了')
      clearInterval(this.interval)
    })
  },
  destoryed () {
    clearInterval(this.interval)
  },
  beforeRouteLeave (to, from, next) {
    clearInterval(this.interval)
    next()
  },
  methods: {
    goBack () {
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goBack')
    },
    webViewFunc (funcName, callback) {
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.registerHandler(funcName, callback)
    },
    jackpotIndex (params={}, callback) {
      jackpotIndex(params).then(res => {
        console.log(res)
        this.pageData = res
        this.number = res.steps
        if (callback) {
          callback(res.user_num)
        }
      }).catch(e => {
        if (e == '18009') {
          this.jackpotIndex(params, callback)
        } else {
          Toast({
            message: e.msg || e.message,
            duration: 3000
          })
        }
      })
    },
    formateScrollNumber (numStr) {
      console.log(numStr)
      return (Array(9).join(0) + numStr).slice(-9).split('')
    },
    rankJackpot () {
      this.dataCollect('TE_GUAFEN_CLICK', '运动赚颜值', {
        ITEM_ID: 1,
        ITEM_NAME: '报名'
      })
      rankJackpot({}).then(res => {
        console.log
        Toast.success({message: res.msg, onClose: () => {
          this.jackpotIndex()
        }});
      }).catch(e => {
        if (e == '18009') {
          this.rankJackpot()
        } else {
          Toast({
            message: e.msg || e.message,
            duration: 3000
          })
        }
      })
    },
    divideJackpot () {
      divideJackpot({}).then(res => {
        console.log(res)
        Toast.success({message: res.msg, onClose: () => {
          this.jackpotIndex()
        }});
      }).catch(e => {
        if (e == '18009') {
          this.divideJackpot()
        } else {
          Toast({
            message: e.msg || e.message,
            duration: 3000
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/ .common-title .title, /deep/ .common-title .back svg{
    fill: #fff;
    color: #fff;
  }
  .RunAttendance-wrap{
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-image: url(../../assets/images/activity_4_bg.jpg);
    background-repeat: no-repeat;
    overflow: hidden;
    background-position: center -0.88rem;
    background-size: 100% auto;
    background-color: #db3839;
    
    .RunAttendance-number{
      position: relative;
      width: 6.9rem;
      height: 3.41rem;
      background: url(../../assets/images/activity_4_number.png) no-repeat;
      background-size: contain;
      margin: 2.1rem auto 0;
      margin: calc(constant(safe-area-inset-top) + 44px + 0.5rem) auto 0;
      margin: calc(env(safe-area-inset-top) + 44px + 0.5rem) auto 0;
      .numbers-row{
        position: absolute;
        left: 0.64rem;
        top: 1.05rem;
        width: 5.65rem;
        height: 1.3rem;
        display: flex;
        align-items: center;

        >div{
          width: 0.64rem;
          height: 1.3rem;
          overflow-y: hidden;

          .numbers-column{
            transition: 1s;
            
            >div{
              width: 0.64rem;
              height: 1.3rem;
              font-size: 0.58rem;
              color: #7A4D1A;
              text-align: center;
              font-weight: bold;
              line-height: 1.3rem;
            }
          }
        }
      }
      .people{
        position: absolute;
        bottom: 0.3rem;
        width: 100%;
        font-size: 0.23rem;
        color: #C46800;
        text-align: center;
      }
    }
    .RunAttendance-play{
      width: 5.57rem;
      height: 6.63rem;
      background: url(../../assets/images/activity_4_border.png) no-repeat;
      background-size: contain;
      margin: 0.2rem auto 0;
      overflow: hidden;
      padding:  0 0.7rem;

      >h2{
        font-size: 0.36rem;
        color: #C46800;
        text-align: center;
        margin-top: 0.7rem;
      }
      .RunAttendance-play-steps{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.45rem;

        >div{
          .step-wrap{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 0.6rem;
            background: linear-gradient(358deg, #FFBA40 0%, #FFEE53 100%);
            margin: 0 auto;

            .step_1{
              width: 0.66rem;
              height: 0.76rem;
              background: url(../../assets/images/step_1.png) no-repeat;
              background-size: contain;
            }
            .step_2{
              width: 0.87rem;
              height: 0.76rem;
              background: url(../../assets/images/step_2.png) no-repeat;
              background-size: contain;
            }
            .step_3{
              width: 0.76rem;
              height: 0.76rem;
              background: url(../../assets/images/step_3.png) no-repeat;
              background-size: contain;
            }
            .yes{
              width: 0.67rem;
              height: 0.57rem;
              background: url(../../assets/images/yes.png) no-repeat;
              background-size: contain;
            }
          }
          .step-wrap::after{
            content: '';
            position: absolute;
            top: 0.53rem;
            right: -0.75rem;
            width: 0.54rem;
            height: 0.27rem;
            background: url(../../assets/images/step_arrow.png) no-repeat;
            background-size: contain;
          }

          >h3{
            font-size: 0.24rem;
            color: #C46800;
            text-align: center;
            margin-top: 0.28rem;
          }
          >p{
            font-size: 0.24rem;
            color: #000;
            text-align: center;
          }
        }
        
        >div:last-child .step-wrap::after{
          display: none;
        }
      }
      .runBtn{
        width: 5.58rem;
        height: 0.97rem;
        margin: 0.48rem auto 0;
        background: url(../../assets/images/run_activity_btn.png) no-repeat;
        background-size: 100% 100%;
        font-size: 0.36rem;
        color: #8B410A;
        text-align: center;
        line-height: 0.97rem;
        font-weight: bold;
      }
      .tips{
        font-size: 0.24rem;
        color: #999;
        text-align: center;
        margin-top: 0.17rem;
      }
    }
    .RunAttendance-rule{
      margin: 0.37rem auto;
      padding: 0 0.43rem;

      >h2{
        font-size: 0.3rem;
        color: #fff;
        margin-bottom: 0.3rem;
      }
      /deep/ P{
        display: flex;
        flex-direction: column;
      }
    }
  }
</style>